<template>
  <div>
    <NFTCardSkeleton v-if="loading" />
    <div class="nft-card" v-else>
      <div class="nft-card__head">
        <div class="info">
          <div class="token">
            <span>{{ item.name }}</span>
          </div>
          <div class="tag">
            <span>{{ item.desc }}</span>
          </div>
        </div>
        <div class="icon">
          <img :src="item.icon" />
        </div>
      </div>
      <div class="nft-card__body">
        <div class="item" v-for="(sub, i) in item.list" :key="i">
          <span class="name">{{ sub.name }}:</span>
          <div class="value">
            <a
              :href="sub.value"
              v-if="/^http/gi.test(sub.value)"
              target="_blank"
              >{{ sub.value }}</a
            >
            <span v-else>{{ sub.value }}</span>
          </div>
        </div>
        <div class="g-clickable g-card-button-gradient full-button">
          <span>Explore</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NFTCardSkeleton from "./NFTCardSkeleton";

export default {
  components: {
    NFTCardSkeleton,
  },
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    getTokenIcon(symbol) {
      return `https://assets.tokenswap.exchange/icon/${symbol.toLowerCase()}.svg`;
    },
  },
};
</script>

<style lang="scss" scoped>
.nft-card {
  background-color: var(--card);
  padding: 30px;
  border-radius: 30px;

  &__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;

    .info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .token {
        span {
          font-size: 18px;
          font-family: "Roboto Black";
          color: var(--color);
        }
        margin-bottom: 12px;
      }
      .tag {
        display: flex;
        align-items: center;

        span {
          font-size: 10px;
          font-family: "Roboto Bold";
          line-height: 1.5;
          color: var(--color-content);
        }
      }
    }

    .icon {
      position: relative;
      img {
        width: 64px;
        height: 64px;
        object-fit: cover;
        border-radius: 50%;
      }
    }
  }
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;

  .name {
    font-size: 14px;
    font-family: "Roboto Regular";
    color: var(--color-content);
  }
  .value {
    max-width: 120px;
    font-size: 14px;
    font-family: "Roboto Medium";
    color: var(--color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    a {
      color: var(--color);
    }
  }
}

.full-button {
  width: 100%;
  height: 60px;
  font-size: 18px;
  color: var(--color-dark);
  border-radius: 30px;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    font-size: 15px;
    font-family: "Roboto Bold";
    color: var(--color);
  }
}
</style>
